<template>
	<view class="d_jogos">
		<!-- #ifdef APP-PLUS -->
		<view style="height: 60rpx"></view>
		<!-- #endif -->
		<view class="d_j_head d_flex game_bg_header">
			<u-icon class="off_icon" name="../../static/images/unfold.png" color="#666" size="48rpx"
				@click="showFlPopup=true"></u-icon>

			<view class="d_logo d_flex">
				<u--image :src="require('@/static/images/logo.png')" width="120rpx" height="100rpx">
				</u--image>
			</view>
			<view class="d_j_h_con">
				<!-- 已登录 -->
				<view v-if="token" class="d_balance d_bgColor d_border22 d_flex">
					<u-icon name="reload" color="#fff" size="40rpx" @tap="refresh"></u-icon>
					<text @tap="$tab.navigateTo('/pages/mine/account/index')">{{userInfo.money}}</text>
				</view>

				<!-- 未登录 -->
				<view class="not_login game_flex" v-else>
					<u-button text="Log in" @tap="$store.dispatch('LoginPopup', true)">
					</u-button>

					<u-button text="Register" shape="circle" color="#5c4ee0" @tap="$store.dispatch('LoginPopup', true)">
					</u-button>
				</view>

			</view>
		</view>

		<view class="d_j_banner d_bgColor">
			<u-swiper :list="bannerList" circular indicator indicatorMode="dot" height="400rpx" bgColor="#2f3141"
				radius="18"></u-swiper>
		</view>

		<scroll-view :scroll-x="true">
			<view class="d_j_nav game_flex d_bgColor">
				<view v-for="item in gameNavList"
					:class="[item.status == navItemStatus ? 'cu_d_j_n_item' : '', 'd_j_n_item', 'game_flex', 'd_border22']"
					@tap="changeNavItem(item.status)">
					<view class="top">
						<u--image :src="item.url" width="60rpx" height="60rpx">
							<template v-slot:loading>
								<u-loading-icon color="#666"></u-loading-icon>
							</template>
						</u--image>
					</view>
					<view class="foo">
						{{item.name}}
					</view>

				</view>
			</view>
		</scroll-view>
			<view class="show_search">
					<u--input 
						:placeholder="$t('jogos.fl8')" 
						 border="none" 
						 v-model="searchForm.keyword"
						:customStyle="{'background': '#0e131b', height: '80rpx', padding: '0 20rpx', border: '2px solid #485365', borderRadius: '12rpx'}"
						></u--input>
				</view>

		<view class="d_j_list d_bgColor d_border22" v-for="(key,value) in gameList" :key="value">

			<view class="d_jl_top d_flex">
				<u--image class="fl" src="../../static/images/jogos/youxi1.png" width="50rpx" height="50rpx">
					<template v-slot:loading>
						<u-loading-icon color="#666"></u-loading-icon>
					</template>
				</u--image>
				<view class="con">
					{{value}}
				</view>
				<view class="fr game_flex d_border12">
					<text>{{$t('jogos.all')}}</text>
				</view>
			</view>

			<view class="d_jl_list d_flex">
				<view class="d_jl_list_item" v-for="item in key" :key="item.id" @tap="enterGameBtn(item)">
					<u--image radius="10rpx" :src="item.imageUrl" width="220rpx" height="300rpx">
						<template v-slot:loading>
							<u-loading-icon color="#666"></u-loading-icon>
						</template>
					</u--image>
					<!-- 
					<view class="text d_ellipsis">
						{{item.gameName}}
					</view> -->
				</view>

				<view class="d_load_more game_flex game_justify_center">
					<text class="game_flex game_justify_center align_center d_border12">加载更多</text>
				</view>
			</view>
		</view>

		<!-- 记录 -->
		<view class="game_record d_border22">
			<view class="record_top game_flex">
				<view class="rec_item curr_rec_item d_border12 game_flex game_justify_center align_center">最新记录</view>
				<view class="rec_item d_border12 game_flex game_justify_center align_center">赢得排名</view>
			</view>

			<view class="record_list">
				<view class="list_head game_flex align_center">
					<view class="game_flex game_justify_center align_center">游戏</view>
					<view class="game_flex game_justify_center align_center">球员</view>
					<view class="game_flex game_justify_center align_center">数量</view>
				</view>
				<view class="list_row">
					<view class="list_rows game_flex align_center">
						<view class="game_flex game_justify_center">1</view>
						<view class="game_flex game_justify_center">2</view>
						<view class="game_flex game_justify_center">3</view>
					</view>
				</view>
			</view>
		</view>

		<view class="d_download" @tap="$tab.navigateTo('/pages/telegram/index')">
			<u-icon name="../../static/images/jogos/dianban1.png" color="#2979ff" size="80rpx"></u-icon>

			<view class="d_d_tips game_flex game_justify_center align_center">
				<text>3</text>
				<u-icon name="../../static/images/jogos/fl22.png" color="#2979ff" size="20rpx"></u-icon>
			</view>
		</view>

		<view class="d_kefu" @tap="$tab.navigateTo('/pages/telegram/index')">
			<u-icon name="../../static/images/jogos/dianban1.png" color="#2979ff" size="80rpx"></u-icon>
		</view>

		<u-popup :show="showFlPopup" mode="left" @close="showFlPopup=false">
			<!-- #ifdef APP-PLUS -->
			<view style="height: 60rpx" class="d_bgColor"></view>
			<!-- #endif -->
			<view class="d_fl_popup d_bgColor">

				<view class="fl_con">
					<view class="f_c_items d_border22 d_flex" v-for="item in 3">
						<view>123</view>
					</view>
				</view>

				<view class="d_fl_fold">
					<u-collapse class="d_u_collapse d_border22" :border="false">
						<u-collapse-item title="促销活动">
							<view class="d_u_collapse_content" v-for="item in 3">
								<text>促销活动</text>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>

				<view class="d_fl_fold_tow">
					<u-collapse class="d_u_collapse d_border22" :border="false">
						<u-collapse-item title="语言切换">
							<view class="d_u_collapse_content">
								<text>英语</text>
							</view>

							<view class="d_u_collapse_content">
								<text>汉语</text>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>

				<!-- <u-icon class="off_icon" name="../../static/images/off.png" color="#666" size="48rpx"
					@tap="showFlPopup=false"></u-icon> -->
			</view>
		</u-popup>

		<u-popup :show="loginPopup" mode="center" @close="loginNavIndex=0" :round="10">

			<view class="d_login_popup" :key="loginNavIndex">
				<!-- <view class="login_nav" v-if="false">
					<u-tabs :list="loginNavInfo" :current="loginNavIndex" @click="clickNav" lineWidth="30"
						lineColor="#49acfb" :activeStyle="{
							            color: '#49acfb',
							            fontWeight: 'bold',
							            transform: 'scale(1.05)'
							        }" :inactiveStyle="{
							            color: '#999',
							            transform: 'scale(1)'
							        }"></u-tabs>
				</view> -->


				<view class="login_from" v-if="false">
					<!-- 登录 -->
					<template v-if="loginNavIndex == 0">
						<view style="margin-bottom: 20rpx;">
							<u-tabs
								:list="[{name: $t('popUp.text7'),logins:true}, {name: $t('popUp.text8'),logins:false}]"
								@change="changeTabs" :activeStyle="{
							        color: '#49acfb',
							        fontWeight: 'bold',
							        transform: 'scale(1.05)'
							    }"></u-tabs>
						</view>


						<view class="" style="height: 80rpx;" v-if="logins">
							<u--input :placeholder="LoginName" border="none" v-model="loginForm.username"
								@change="change" shape="circle" color="#fff"
								:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0px 0px 0px 120rpx', border: '1px solid #666'}"></u--input>

							<view class="" style="width: 120rpx;height: 80rpx;position: relative;top: -80rpx;line-height: 80rpx;
    text-align: center;font-size: 28rpx;">
								+55
							</view>

						</view>


						<view class="" style="height: 80rpx;" v-if="em">
							<u--input :placeholder="LoginName" v-if="em" border="none" v-model="loginForm.username"
								@change="change" shape="circle" color="#fff"
								:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0px 20rpx', border: '0 20rpx'}"></u--input>
						</view>


						<u--input :placeholder="$t('userinfo.text154')" border="none" v-model="loginForm.password"
							shape="circle" @change="change" color="#fff"
							:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0 20rpx', marginTop: '30rpx', border: '1px solid #666'}">
							<template slot="suffix">
								<!-- <u-icon name="eye" color="#999" size="38rpx"></u-icon> -->
							</template>
						</u--input>

						<view style="height: 40rpx">

						</view>

						<u-button style="height: 80rpx" type="primary" :text="$t('popUp.text5')" shape="circle"
							@tap="loginSubmit"></u-button>
					</template>
					<template v-if="loginNavIndex == 1">

						<view style="margin-bottom: 20rpx;">
							<u-tabs
								:list="[{name: $t('popUp.text7'),logins:true}, {name: $t('popUp.text8'),logins:false}]"
								@change="changeTabs" :activeStyle="{
							        color: '#49acfb',
							        fontWeight: 'bold',
							        transform: 'scale(1.05)'
							    }"></u-tabs>
						</view>

						<view class="" style="height: 80rpx;" v-if="logins">
							<u--input :placeholder="LoginName" border="none" v-model="loginForm.username"
								@change="change" shape="circle" color="#fff"
								:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0px 0px 0px 120rpx', border: '1px solid #666', marginTop: '40rpx'}"></u--input>

							<view class=""
								style="width: 120rpx;height: 80rpx;position: relative;top: -80rpx;line-height: 80rpx;text-align: center;font-size: 28rpx;">
								+55</view>

						</view>

						<view class="" style="height: 80rpx;" v-if="em">
							<u--input :placeholder="LoginName" border="none" v-model="loginForm.username"
								@change="change" shape="circle" color="#fff"
								:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0px 20rpx', border: '1px solid #666'}"></u--input>

						</view>

						<!-- 验证码  解决真机不展示的bug-->
						<view style="position: relative; d_flex">
							<u--input :placeholder="$t('jogos.title2')" border="none" v-model="loginForm.codes"
								@change="change" shape="circle"
								:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0 20rpx', border: '1px solid #666', marginTop: '20rpx'}">

							</u--input>
							<view style="position: absolute; right: 10rpx; top: 50%; transform: translateY(-50%);">
								<u-code ref="uCode" :startText="$t('jogos.title2')" :endText="$t('jogos.title2')"
									@change="codeChange" seconds="60" :changeText="'X' + $t('jogos.title3')"></u-code>
								<u-button :text="tips" type="success" size="mini" color="orange" shape="circle"
									@tap="getVerificationCode('register')"></u-button>
							</view>
						</view>

						<u--input :placeholder="$t('popUp.text11')" border="none" v-model="loginForm.password"
							@change="change" shape="circle" color="#fff"
							:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0 20rpx', border: '1px solid #666', marginTop: '20rpx'}">
							<template slot="suffix">
								<!-- <u-icon name="eye" color="#999" size="38rpx"></u-icon> -->
							</template>
						</u--input>
						<u--input :placeholder="$t('popUp.text12')" border="none" v-model="loginForm.newPassword"
							@change="change" shape="circle" color="#fff"
							:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0 20rpx', border: '1px solid #666', marginTop: '20rpx'}">
							<template slot="suffix">
								<!-- <u-icon name="eye" color="#999" size="38rpx"></u-icon> -->
							</template>
						</u--input>

						<u--input :placeholder="$t('popUp.text13')" border="none" v-model="loginForm.invitation_code"
							shape="circle" color="#fff"
							:customStyle="{'background': '#292e3d', height: '80rpx', padding: '0 20rpx', border: '1px solid #666', marginTop: '20rpx'}">
						</u--input>

						<view style="height: 60rpx">

						</view>
						<u-button style="height: 80rpx" type="primary" :text="$t('popUp.text6')" shape="circle"
							@tap="signInBtn"></u-button>
					</template>

				</view>

				<u-icon class="off_icon" name="close" color="#fff" size="48rpx"
					@tap="$store.dispatch('LoginPopup', false); loginNavIndex=0"></u-icon>
			</view>


		</u-popup>


		<!-- 底部 -->
		<game-footer />
	</view>
</template>

<script>
	import {
		banner,
		gameList,
		enterGame,
		notice,
		downloadAddress,
		fuzzyQueryGame
	} from '@/api/jogos.js'
	import {
		login,
		register,
		verificationCode,
		forgotPassword
	} from '@/api/login.js'

	import {
		mapGetters
	} from 'vuex'

	import GameFooter from '@/components/game-footer/index.vue'

	export default {
		computed: {
			...mapGetters(['userInfo', 'token', 'loginPopup'])
		},
		components: {
			GameFooter
		},
		data() {
			return {
				showFlPopup: false,
				tips: '',
				logins: true,
				em: false,

				loginNavIndex: 0,
				navItemStatus: 1,
				loginNavInfo: [{
						name: this.$t('popUp.text5')
					},
					{
						name: this.$t('popUp.text6')
					},
				],
				value: '',
				gameNavList: [{
						name: 'Salao',
						url: require('@/static/images/jogos/youxi0.png'),
						status: 1
					},
					{
						name: 'Slots',
						url: require('@/static/images/jogos/youxi1.png'),
						status: 2
					},
					{
						name: 'Vivo',
						url: require('@/static/images/jogos/youxi2.png'),
						status: 3
					},
					{
						name: 'Fishing',
						url: require('@/static/images/jogos/youxi4.png'),
						status: 4
					},
					{
						name: 'Live',
						url: require('@/static/images/jogos/youxi3.png'),
						status: 5
					},

				],
				gameList: [],

				loginForm: {
					account: '',
					password: '',
					username: '',
					codes: '',
					invitation_code: '',
					newPassword: ''
				},
				LoginName: this.$t('popUp.text7'),
				columns: [
					[{
							name: this.$t('settings.text5'),
							label: 'zh'
						},

						{
							name: this.$t('settings.text6'),
							label: 'Portugal'
						},
					]
				],
				showNoticeDot: false,
				downloadLink: '',
				showSearchList: false,
				searchForm: {
					keyword: '',
					page: 1,
					list: 10
				},
				total: undefined,
				status: 'loadmore',
				searchGameList: [],
				// 轮播图数据
				bannerList: [require('@/static/banner.png')]
			}
		},
		onLoad() {
			this.getBanner()
			this.getBameList()
			this.getDownloadAddress()
			if (this.getUrlParam('pid')) {
				this.loginNavIndex = 1
				this.logins = true
				this.$store.dispatch('LoginPopup', true)
				this.loginForm.invitation_code = this.getUrlParam('pid')
			}
		},
		methods: {
			to(url) {
				uni.navigateTo({
					url
				})
			},

			clickNav({
				index
			}) {
				this.loginNavIndex = index
			},
			codeChange(val) {
				this.tips = val
			},

			// 获取验证码

			async getVerificationCode(event) {
				if (!this.loginForm.username) return
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading()
					const form = {
						username: this.loginForm.username,
						event
					}
					const {
						code,
						data
					} = await verificationCode(form)
					uni.hideLoading();
					if (code == 200) {
						this.$modal.msg(this.$t('jogos.title5'))
						this.$refs.uCode.start();
					}
				} else {
					this.$modal.msg(this.$t('jogos.title4'))
				}
			},
			change(e) {},

			async getBanner() {
				let {
					data,
					code
				} = await banner()
				if (code == 200) {
					data.map(item => {
						return item.image = this.$config.baseImgUrl + item.image
					})
				}
			},

			async getBameList() {
				let {
					data,
					code
				} = await gameList({
					status: this.navItemStatus
				})
				if (code == 200) {
					this.gameList = data
				}
			},

			changeNavItem(status) {
				this.navItemStatus = status
				this.getBameList()
			},

			// 登录
			async loginSubmit() {
				// console.log(this.loginForm)
				await this.$store.dispatch('Login', this.loginForm)

				this.$modal.msg(this.$t('popUp.text14'))
				this.$store.dispatch('LoginPopup', false)
				this.$store.dispatch('GetInfo')
			},

			// 注册
			async signInBtn() {
				let {
					account,
					username,
					password,
					codes,
					invitation_code
				} = this.loginForm
				const data = await register({
					username,
					password,
					codes,
					invitation_code
				})
				if (data.code == 200) {
					this.$modal.msg(this.$t('popUp.text17'))
					this.$dDelay(1000).then(res => {
						this.loginNavIndex = 0
					})
				}
			},

			// 进入游戏
			async enterGameBtn(row) {
				if (!this.$isLogin()) {
					return this.$store.dispatch('LoginPopup', true)

				}
				const form = {
					ispc: "device1",
					back: "/",
					gameCode: row.gameCode,
					gameType: row.gameType,
					platType: row.platType

				}
				let {
					code,
					data
				} = await enterGame(form)
				if (code == 200) {
					window.location.href = data
				}
			},

			// 找回密码
			async forgotPasswordBtn() {
				let {
					code,
					data
				} = await forgotPassword(this.loginForm)
				if (code == 200) {
					this.$modal.msg(this.$t('popUp.text18'))
					this.$dDelay(1000).then(res => {
						this.loginNavIndex = 0
					})
				}
			},

			//刷新余额
			async refresh() {
				await this.$store.dispatch('GetInfo')
				this.$modal.msg(this.$t('userinfo.text155'))
			},

			changeTabs({
				name,
				logins
			}) {

				this.LoginName = name
				if (logins) {
					this.em = false
				} else {
					this.em = true
				}

				this.logins = logins
			},

			// 如果检测有pid 打开注册弹窗 
			getUrlParam(param) {
				// let urlObj = new URL(url); 
				// return urlObj.searchParams.get(param);
				const options = uni.getLaunchOptionsSync();
				if (options.query && options.query[param]) {
					return options.query[param];
				}
				return null;
			},

			getDetails(val) {
				console.log(val)

			},

			async confirmLanguage({
				value
			}) {

				await this.$store.dispatch('Language', value[0].label)
				this.$i18n.locale = value[0].label
				this.$modal.msg(this.$t('popUp.text15'))
				this.setTabBarItem()
			},

			setTabBarItem() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.one')
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabbar.tow')
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabbar.three')
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('tabbar.four')
				})
				uni.setTabBarItem({
					index: 4,
					text: this.$t('tabbar.five')
				})
			},

			// 复制内容
			copyData() {
				let _this = this
				uni.setClipboardData({
					data: String(_this.userInfo.id),
					success: function() {
						_this.$modal.msg(_this.$t('mine.text27'))
					}
				})
			},

			async getNoticeDot() {
				let {
					code,
					data
				} = await notice()
				if (code == 200) {
					this.showNoticeDot = data
				}
			},

			async getDownloadAddress() {
				let {
					code,
					data
				} = await downloadAddress()
				if (code == 200) {
					this.downloadLink = data
				}
			},

			download() {
				window.location.href = this.downloadLink.appd
			},

			async getFuzzyQueryGame() {
				this.showSearchList = true

				let {
					code,
					data
				} = await fuzzyQueryGame(this.searchForm)
				if (code == 200) {

					this.total = data.tal
					this.status = 'loadmore'
					this.searchGameList = this.searchGameList.concat(data.data)
					if (this.searchForm.list > data.data.length) {
						return this.status = 'nomore'
					}
				}
			},

			async searchScrolltolower() {

				if (this.total < (this.searchForm.page + 1) * this.searchForm.list) {
					return false
				}
				this.searchForm.page += 1
				this.getFuzzyQueryGame()
			},

			blurInput() {
				if (this.isBlurInput) {
					this.showSearchList = false;
					this.searchForm.keyword = ''
				}

			}

		},
		watch: {
			loginNavIndex(index) {
				if (index == 2) {
					this.loginNavInfo = [{
						name: '忘记密码'
					}]

				} else {
					this.loginNavInfo = [{
							name: this.$t('popUp.text5')
						},
						{
							name: this.$t('popUp.text6')
						},
					]
				}
				this.loginForm.account = ''
				this.loginForm.password = ''
				this.loginForm.username = ''
				this.loginForm.codes = ''
				this.loginForm.newPassword = ''
				this.LoginName = this.$t('popUp.text7')

				this.$forceUpdate()
			},

			'searchForm.keyword'() {

				this.searchGameList = []
				this.total = 0
				this.searchForm.page = 1
				this.searchForm.list = 10

				if (this.searchForm.keyword) {
					this.getFuzzyQueryGame()
				} else {
					this.showSearchList = false;
				}
			}

		},
		onHide() {
			this.showFlPopup = false
		}
	}
</script>

<style lang="scss" scoped>
	.d_jogos {
		padding-top: 140rpx;

		.d_j_head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding: 10rpx;
			z-index: 10;
			height: 140rpx;
			align-items: center;

			.d_language {
				padding-left: 20rpx;
				color: #fff;
				width: 120rpx;
			}

			.d_balance {
				padding: 15rpx 20rpx;
				color: #fff;
				justify-content: space-between;
				min-width: 200rpx;
				align-items: center;
			}

			.d_j_h_con {
				margin-left: 170rpx;

				.not_login {
					.u-button {
						padding: 0 40rpx;
						height: 80rpx;
						background-color: #5d4fe1;
						border-radius: 20rpx;
						border: none;
						color: #fff;

						::v-deep.u-button__text {
							font-size: 32rpx !important;
						}
					}

					.u-button:last-child {
						margin-left: 20rpx;
						background-color: #eb425c !important;
						border: none !important;
					}
				}
			}

		}


		.d_j_banner {
			padding: 20rpx 40rpx;
		}

		.d_j_nav {
			position: relative;
			padding: 20rpx;
			align-items: center;

			.d_j_n_item {
				margin-right: 20rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 125rpx;
				height: 140rpx;
				color: #838ca0;
				background-color: #181f2b;

				.foo {
					margin-top: 6rpx;
				}
			}

			.cu_d_j_n_item {
				position: relative;
				color: #fff;
				background-color: #4330c5;
			}

		}

		.d_j_search_list {
			// padding: 10rpx;
			margin: 0 10rpx 20rpx 10rpx;

			.search_list {
				padding-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				height: 600rpx;

				.search_list_item {
					margin-bottom: 20rpx;
					width: 220rpx;

					.text {
						margin: 10rpx;
						color: #838ca0;
						font-size: 24rpx;
					}
				}
			}

			::v-deep .uni-scroll-view-content {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.search_list_item:nth-child(3n-1) {
					margin: 0 20rpx;
				}
			}
		}
		
		.show_search{
			margin: 0 20rpx;
		}

		.d_j_list {
			padding: 10rpx;
			margin: 0 10rpx 20rpx 10rpx;

			.d_jl_top {
				color: #fff;
				align-items: center;

				.con {
					margin: 0 20rpx;
					flex: 1;
					font-size: 32rpx;
					font-weight: 700;
				}

				.fr {
					padding: 0 16rpx;
					height: 50rpx;
					font-size: 24rpx;
					align-items: center;
					color: #69758a;
					background-color: #181f2c;
				}
			}

			.d_jl_list {
				padding-top: 20rpx;
				flex-wrap: wrap;
				justify-content: space-between;

				.d_jl_list_item {
					margin-bottom: 30rpx;
					width: 220rpx;

				}

				.d_load_more {
					width: 100%;

					&>text {
						width: 200rpx;
						height: 70rpx;
						color: #5c677a;
						background-color: #181f2b;
					}
				}
			}

		}

		.d_fl_popup {
			padding: 60rpx 30rpx 30rpx 30rpx;
			position: relative;
			width: 600rpx;
			height: 100%;
			color: #fff;
			overflow-y: auto;

			.fl_con {
				margin-top: 40rpx;

				.f_c_items {
					margin-top: 20rpx;
					padding: 0 30rpx;
					align-items: center;
					height: 120rpx;
					width: 100%;
					font-size: 26rpx;
					background-color: pink;
				}
			}

			.d_fl_fold,
			.d_fl_fold_tow {
				margin-top: 20rpx;

				.d_u_collapse {
					background: #1e2531;

					.d_u_collapse_content {
						padding: 20rpx 0;
						color: #bed6fb;
						font-size: 28rpx;
					}

					::v-deep.u-cell__title-text {
						color: #bed6fb;
						font-size: 24rpx;
					}
				}
			}

			.d_fl_fold_tow {
				.d_u_collapse {
					border: 1px solid #3f4a5c;
					background-color: #131922;
				}
			}

			.off_icon {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}

		.game_record {
			margin: 10rpx 20rpx;
			color: #5b667a;

			// background-color: pink;
			.record_top {
				margin: 0 40rpx;

				.rec_item {
					flex: 1;
					height: 80rpx;
					background: #181f2b;
				}

				.curr_rec_item {
					color: #fff;
					background-color: #4331be;
				}
			}

			.record_list {
				margin: 20rpx 0;

				.list_head {
					height: 70rpx;

					// background-color: #191f2a;
					&>view {
						flex: 1;
					}
				}

				.list_row {
					.list_rows {
						margin-bottom: 20rpx;
						height: 60rpx;

						&>view {
							flex: 1;
						}
					}
				}
			}

		}

		.d_login_popup {
			padding: 30rpx;
			height: 99vh;
			width: 99vw;
			color: #fff;
			background-color: #181f2b;

			.login_nav {
				::v-deep .u-tabs__wrapper__nav__item {
					flex: 1;
				}
			}

			.login_from {
				.fr_one {
					margin: 20rpx 0;
					flex-direction: column;
					align-items: center;
					font-size: 34rpx;

					&>text {
						margin-top: 20rpx;
					}
				}

				.fr_four {
					height: 80rpx;
					line-height: 80rpx;
				}
			}

			.off_icon {
				position: absolute;
				top: 40rpx;
				right: 6%;
			}
		}

		.d_kefu,
		.d_download {
			position: fixed;
			bottom: 200rpx;
			right: 40rpx;
			border-radius: 50%;
		}

		.d_download {
			bottom: 300rpx;

			.d_d_tips {
				padding: 0 20rpx;
				position: absolute;
				top: -40rpx;
				left: -10%;
				color: #fff;
				width: 100rpx;
				height: 40rpx;
				border-radius: 22rpx;
				background-color: #d74451;
				justify-content: space-around;
				animation: scaleEffect 2s infinite alternate;
				&::before {
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					content: '';
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-left: 20rpx solid transparent;
					border-right: 20rpx solid transparent;
					border-top: 20rpx solid #d74451;
				}
			}
		}

	}
	
	@keyframes scaleEffect {
	  0% {
	    transform: scale(1);
	  }
	  50% {
	    transform: scale(1.1);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
</style>